<template>
	<!-- 签收确认未接地磅页面 -->
	<view class="container">
		<topBar>签收确认</topBar>
		<view class="content">
			<view class="cart-info">
				<view class="cart-info-content">
					<view class="cart-types">
						<Button2 class="btn" v-if="info.energyType">{{info.energyType}}</Button2>
						<Button2 class="btn" v-if="info.directory">{{info.directory}}</Button2>
					</view>
					<view class="cart-code">
						<view class="code-item">
							<input type="text" v-model="nowCartCode[0]" />
						</view>
						<view class="code-item">
							<input type="text" v-model="nowCartCode[1]" />
						</view>
						<view class="code-separator">
							·
						</view>
						<block v-for="(item,index) in nowCartCode" :key="index">
							<view class="code-item" v-if="index > 1">
								<input type="text" v-model="nowCartCode[index]" />
							</view>

						</block>

					</view>
					<view class="cart-type">
						新能源
					</view>
				</view>
			</view>

			<view class="cart-lines">
				<view class="line" @click="showMaterialTypePopup">
					<view class="title">
						<image src="/static/img/common/required.png" class="required-icon"></image>
						<text>物料类型</text>
					</view>
					<view class="val" :class="formData.rockName == '' &&'no-check'">
						<text>{{formData.rockName || '请选择'}}</text>
						<uni-icons type="right" size="28"
							:color="formData.rockName == ''?'#989DA5':'#0E1624'"></uni-icons>
					</view>
				</view>

				<view class="line">
					<view class="title">
						签收方量
					</view>
					<view class="val">
						{{formData.actualVolume}}方
					</view>
				</view>
				<view class="line">
					<view class="title">
						<image src="/static/img/common/required.png" class="required-icon"></image>
						<text>是否满载</text>
					</view>
					<view class="val">
						<Button1 v-for="item in fullFlagList" :class="item.id != formData.fullFlag && 'no-active-btn'"
							:key="item.id" @click="changeFullFlag(item.id)">
							{{item.name}}
						</Button1>
					</view>
				</view>
				<block v-if="formData.fullFlag == 0">

					<view class="line">
						<view class="title">
							<!-- <image src="/static/img/common/required.png" class="required-icon"></image> -->
							<text>扣方方量</text>
						</view>
						<view class="val deduction-amount">
							-
							<input class="amount-input" type="number" v-model="formData.volumeReduce"
								@blur="changeVolumeReduce" placeholder-style="color:#EB4F51;" placeholder="请输入" />
							方
						</view>
					</view>

					<view class="line">
						<view class="title">
							<!-- <image src="/static/img/common/required.png" class="required-icon"></image> -->
							<text>扣方原因</text>
						</view>
						<view class="val">
							<input class="reason-input" v-model="formData.reduceReason" placeholder="请输入" />
						</view>
					</view>
					<view class="line">
						<view class="title">
						</view>
						<view class="val btns">
							<Button1 v-for="btn in reasonList" :key="btn"
								:class="formData.reduceReason!==btn && 'no-active-btn' " @click="changeReason(btn)">
								{{btn}}
							</Button1>

						</view>
					</view>
				</block>

			</view>
		</view>

		<view class="bottom-btns">
			<view class="btn danger" @click="showAbnormalSignPopup">
				异常签收
			</view>
			<view class="btn primary" @click="saveReceiving">
				正常签收
			</view>
		</view>
		<!-- 物料类型弹窗 -->
		<MaterialTypePopup v-if="isShowMaterialTypePopup" :type-list="muckTypeList"
			@saveMaterialType="saveMaterialType" />
		<!-- 异常签收弹窗 -->
		<AbnormalSignPopup v-if="isShowAbnormalSignPopup" @btnClick="saveAbnormalSign" />
		<!-- 消息提示 -->
		<messageTip ref="myMessage"></messageTip>
	</view>

</template>

<script setup lang="ts">
	// import BottomBtn from '@/components/bottomBtn/bottomBtn.vue';
	import Button1 from '@/components/button1/button1.vue';
	import Button2 from '@/components/button2/button2.vue';
	import MaterialTypePopup from '@/components/consumption/materialTypePopup/materialTypePopup.vue'
	import AbnormalSignPopup from '@/components/consumption/abnormalSignPopup/abnormalSignPopup.vue';
	import { ref, reactive, computed } from 'vue';
	import { useConsumptionStore } from '@/stroes';
	import * as consumptionApi from '@/api/consumption/consumption.js';
	// 消息提示
	const myMessage = ref()
	// 消纳仓库
	const consumptionStore = useConsumptionStore()
	const info = consumptionStore.info
	// console.log(info, 'kkkkkkkk');
	const formData = reactive({
		id: info.orderId,
		// 是否满载  0未满载 1已满载
		fullFlag: info.fullFlag || '1',
		// 实际装载
		actualLoad: '',
		// 实际方量
		actualVolume: (Number(info.volume) - info.volumeReduce) || null,
		// 扣方方量
		volumeReduce: info.volumeReduce || null,
		// 扣方原因
		reduceReason: info.volumeReduce || '',
		// 签收状态 1处理中2已签收3退回4其他
		orderStatus: '2',
		// 异常签收原因
		orderReason: '',
		// 物料类型名字
		rockName: info.rockName || '',
		// 物料类型id
		rockType: info.rockType || '',
	})
	// 车牌号
	const nowCartCode = computed(() => {
		if (info.carNumber) {
			return info.carNumber.split('')
		} else {
			return ['', '', '', '', '', '', '', '']
		}
	})
	// 当前物料类型列表
	const muckTypeList = ref([])
	// 是否显示物料类型弹窗
	const isShowMaterialTypePopup = ref(false)
	// 显示物料类型弹窗
	const showMaterialTypePopup = () => {
		isShowMaterialTypePopup.value = true
	}
	consumptionApi.muckTypeAll().then(res => {
		if (res.data.code == 0) {
			muckTypeList.value = res.data.data
			if (formData.rockName) {
				let item = muckTypeList.value.find(item => item.name == formData.rockName);
				formData.rockType = item && item.id
			}
		} else {
			console.log("失败")
		}
	})
	// 保存物料类型
	const saveMaterialType = (item) => {
		if (item) {

			formData.rockType = item.id
			formData.rockName = item.name
		}
		isShowMaterialTypePopup.value = false
	}
	// 满载列表
	const fullFlagList = [{ name: '是', id: 1 }, { name: '否', id: 0 },]
	// 修改满载类型
	const changeFullFlag = (id) => {
		if (id == 1) {
			formData.volumeReduce = 0
		}
		formData.fullFlag = id + ''
	}
	// 修改减扣方量
	const changeVolumeReduce = (data) => {
		let volume = Number(info.volume) - data.detail.value

		if (volume > 0) {
			formData.actualVolume = volume
			// formData.volumeReduce = data.detail.value

		} else {
			formData.volumeReduce = 0
			myMessage.value.open('error', '减扣方量已大于实际方量')
		}
		// console.log(num, '999999999');
	}
	// 是否显示异常签收弹窗
	const isShowAbnormalSignPopup = ref(false)
	// 显示异常签收弹窗
	const showAbnormalSignPopup = () => {
		isShowAbnormalSignPopup.value = true
	}
	// 保存异常签收
	const saveAbnormalSign = (data) => {
		if (data) {
			// console.log('开始保存异常签收');
			formData.orderStatus = data.orderStatus;
			formData.orderReason = data.orderReason;
			formData.rockType = 1;
			saveReceiving()
			isShowAbnormalSignPopup.value = false
		} else {
			isShowAbnormalSignPopup.value = false
		}
	}
	// 扣方原因
	const reasonList = ['未装满', '料不好', '半车', '其他',]

	// 改变扣方原因
	const changeReason = (btn) => {
		formData.reduceReason = btn
	}
	// 保存新增收料
	const saveReceiving = () => {
		// uni.navigateBack()
		if (formData.rockType == '') {
			return myMessage.value.open('error', '请将信息填写完整')
		}
		// formData.orderStatus = '2'
		consumptionApi.saveSign(formData).then(res => {
			if (res.data && res.data.code == 0) {
				myMessage.value.open('success', '签收完成')
				uni.$emit('updata', { msg: "页面刷新" })

				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, 1000)
			} else {
				console.log(res, formData, 'uuuuuuuuuuu');
				myMessage.value.open('error', '签收失败，请重试')
			}
		})
	}
</script>

<style scoped lang="scss">
	.content {
		margin: 32rpx;
		width: 686rpx;
		// height: 1140rpx;
		padding-bottom: 42rpx;
		font-size: 28rpx;
		color: $default-color;
		border-radius: 16rpx;
		background-color: #fff;


		.cart-info {
			padding: 18rpx;
			padding-left: 20rpx;

			.cart-types {
				.btn {
					margin-right: 8rpx;
				}
			}

			.cart-code {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 16rpx 0rpx;
				font-size: 40rpx;
				font-weight: bold;

				.code-item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 68rpx;
					height: 80rpx;
					// line-height: 80rpx;
					text-align: center;
					background: #EFF6FE;
					border-radius: 8rpx;
					overflow: hidden;


				}
			}

			.cart-type {
				font-size: 24rpx;
				text-align: right;
				color: #55CDA8;
			}
		}

		.cart-lines {
			.line {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				border-top: 2rpx solid rgba(156, 159, 163, .1);
				border-bottom: 0rpx;

				.left {
					padding: 0;
				}

				.title {
					width: 30%;
					display: flex;
					align-items: center;

				}

				.val {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					// font-weight: bold;

					.amount-input {
						margin: 0rpx 20rpx;
						width: 100rpx;
					}

					.reason-input {
						width: 120rpx;
					}

					&.deduction-amount {
						color: #EB4F51;
					}

					&.no-check {
						color: #989DA5;
					}

					&.btns {
						font-weight: normal;
					}


				}

			}

		}

		.btn {
			margin-left: 8rpx;
			border-radius: 4rpx;

			&.no-active-btn {
				color: $info-color;
				background: rgba(46, 135, 255, 0.1);
			}
		}

	}

	.bottom-btns {
		position: fixed;
		bottom: 0;
		display: flex;
		width: 100%;
		padding: 16rpx 32rpx 66rpx;
		background-color: #fff;
		box-sizing: border-box;

		.btn {
			padding: 22rpx 0rpx;
			font-size: 28rpx;
			line-height: 33rpx;
			text-align: center;
			color: #fff;
			border-radius: 48rpx;
			border: 2rpx solid $primary-color;

			&.danger {
				margin-right: 12rpx;
				width: 226rpx;
				color: $danger-color;
				border-color: $danger-color;
			}

			&.primary {
				flex: 1;
				background-color: $primary-color;
			}
		}
	}
</style>